<template>
  <div style="background-color: #000;">
    <!-- 轮播 -->
    <div class="jumbotron">
      <img src="../../../static/price/taocan_bk.jpg" alt="" style=" width: 100%;
          height: 100%;
          object-fit:cover;" ref="imgh">
    </div>
    <section class="container fb">
      <el-row :gutter="20">
        <el-col>
          <div id="nav">
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
              <el-tab-pane label="分发下载套餐" name="first">
                <handout></handout>
              </el-tab-pane>
              <el-tab-pane label="超级签名套餐" name="second">
                <signature></signature>
              </el-tab-pane>
              <el-tab-pane label="会员空间套餐" name="third">
                <member></member>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-col>
      </el-row>
    </section>
  </div>
</template>
</div>
</template>

<script>
  import signature from "@/components/priceMember/signatureBar";
  import handout from "@/components/priceMember/handOut";
  import member from "@/components/priceMember/member";
  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {
      signature,
      member,
      handout,
    },
    data() {
      //这里存放数据
      return {
        activeName: "first",
      };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    mounted() {
      let name = sessionStorage.getItem("currentTab");
      // 判断是否存在currentTab，即tab页之前是否被点击切换到别的页面
      if (name) {
        this.activeName = name;
      }
      document.querySelector('body').setAttribute('style', 'background-color:#000');
      this.$nextTick(function () {
        let img = this.$refs.imgh;
        img.onload = function () {
          document.getElementsByClassName("fb")[0].style.top = -img.offsetHeight / 2 + 'px'
        }
      })
    },
    beforeRouteLeave(to, from, next) {
      // 在离开此路由之后清除保存的状态（我的需求是只需要在当前tab页操作刷新保存状态，路由切换之后不需要保存）
      // 根据个人需求决定清除的时间
      setTimeout(function () {
        sessionStorage.removeItem("currentTab");
      }, 1000);
      next();
    },
    methods: {
      handleClick(tab, event) {
        // 点击tab后触发事件，修改显示页面，将状态保存在sessionStorage里面
        sessionStorage.setItem("currentTab", tab.name);
      },
      goUrl(path, name) {
        if (name == "signatureSuper") {
          location.reload();
        }
        this.$router.push({
          path: path,
          name: name,
        });
      },
    },
    created() {
      var token_time = sessionStorage["token_time"];
      token_time = parseInt(token_time);
      token_time = token_time + 3600000;
      var now = new Date().getTime();
      if (token_time < now || token_time == undefined || isNaN(token_time)) {
        console.log("未登录");
        //跳转到登录 
        sessionStorage.setItem("currentTab_title", "");
        this.$router.push({
          path: "/login",
          name: "login",
        });
        return;
      }

    }
  };

</script>
<style scoped>
  .jumbotron {
    margin: 0px;
    padding: 0px;
  }

  .container {
    position: relative;
    background-color: #1a1a1a;
    border-radius: 20px;
  }

  #nav {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 80px;
  }

  /* 轮播 */
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  div>>>.el-tabs__content {
    overflow: visible;
  }

  div>>>.el-tabs__nav-scroll {
    display: flex;
    justify-content: center;
  }

  .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }

  div>>>.el-tabs--card>.el-tabs__header .el-tabs__nav {
    border-radius: 30px;
  }

  div>>>.el-tabs--card>.el-tabs__header {
    border: none;

  }

  div>>>.el-tabs--card>.el-tabs__header .el-tabs__nav {
    border-bottom: 1px solid #ff7f3a;
  }

  div>>>.el-tabs--card>.el-tabs__header .el-tabs__item {
    border-bottom: none;
    border-left: 1px solid #1d1d1d;
  }

  div>>>#tab-first.el-tabs__item.is-active {
    background-color: #ff7f3a;
    border-radius: 30px 0px 0px 30px;
    color: #fff;
  }

  div>>>#tab-second.el-tabs__item.is-active {
    background-color: #ff7f3a;
    border-radius: 0px;
    color: #fff;
  }

  div>>>.el-tabs--card>.el-tabs__header .el-tabs__nav {
    border: 0px;
  }

  div>>>#tab-third.el-tabs__item.is-active {
    background-color: #ff7f3a;
    border-radius: 0px 30px 30px 0px;
    color: #fff;
  }

  div>>>.el-tabs__item {
    color: #ff7f3a;
    font-size: 14px;
  }

  div>>>.el-tabs__item:hover {
    color: #ff7f3a;
  }

  div>>>.el-tabs__nav-wrap.is-scrollable {
    padding: 0px;
  }

  div>>>.el-tabs__item {
    text-align: center;
    width: 380px;
    height: 60px;
    line-height: 60px;
    font-size: 16px;
  }

  div>>>.el-tabs--card>.el-tabs__header .el-tabs__item:first-child {
    border-left: none;
    border-radius: 30px 0px 0px 30px;
  }

  div>>>.el-tabs--card>.el-tabs__header .el-tabs__item:last-child {
    border-left: 1px solid #1d1d1d;
    border-radius: 0px 30px 30px 0px;
  }

  div>>>.el-tabs--card>.el-tabs__header .el-tabs__item {
    background-color: #2d2d2e;
    /* border: 0px; */
    border-left: 1px solid #1a1a1a;

  }

  @media (max-width: 441px) {
    div>>>.el-tabs__item {
      text-align: center;
      width: 97px;
    }
  }

  @media (max-width: 375px) {
    div>>>.el-tabs__item {
      text-align: center;
      width: 97px;
    }
  }

  @media (max-width: 576px) {
    div>>>.el-tabs__item {
      text-align: center;
      width: 120px;
    }
  }

</style>
